{% extends "_layouts/examples.html" %}
{% block title %}Forms / Tick element variants{% endblock %}

{% block standalone_css %}patterns_forms{% endblock %}

{% block content %}
<form>

<div class="row">
  <div class="col-6">
    <h3>.p-checkbox component</h3>

    <p><em>The <code>p-checkbox</code> markup improves spacing between consecutive checkboxes.</em></p>

    {% include 'docs/examples/patterns/forms/_checkbox.html' %}

    <label class="p-checkbox">
      <input type="checkbox" class="p-checkbox__input" aria-labelledby="checkbox1WrapLabel">
      <span class="p-checkbox__label" id="checkbox1WrapLabel">.p-checkbox with a label long enough to wrap wrap wrap wrap wrap wrap wrap wrap</span>
    </label>

    <label class="p-checkbox">
      <input type="checkbox" aria-labelledby="checkboxLabel4" class="p-checkbox__input">
      <span class="p-checkbox__label" id="checkboxLabel4">.p-checkbox</span>
    </label>
    <p class="p-form-help-text is-tick-element">help-text</p>

    {% include 'docs/examples/patterns/forms/_checkbox-heading.html' %}

    {% include 'docs/examples/patterns/forms/_checkbox-inline.html' %}

    <p class="p-muted-heading">
      <label class="p-checkbox--inline">
        <input type="checkbox" class="p-checkbox__input" aria-labelledby="checkboxLabel1"/>
        <span class="p-checkbox__label" id="checkboxLabel1" name="checkboxLabel1">.p-checkbox--inline in .p-muted-heading</span>
      </label>
    </p>

    <p>
      <span class="p-muted-heading">
        <label class="p-checkbox--inline">
          <input type="checkbox" class="p-checkbox__input" aria-labelledby="checkboxLabel2"/>
          <span class="p-checkbox__label" id="checkboxLabel2" name="checkboxLabel2">.p-checkbox--inline in .p-muted-heading</span>
        </label>
      </span>
      alongside text
    </p>

    <div class="u-fixed-width">
      <input class="p-button--positive" type="submit" value="Submit" name="submit"/>
    </div>
  </div>

  <div class="col-6">
    <h3>.p-radio component</h3>

    <p><em>The <code>p-radio</code> markup improves spacing between consecutive radio buttons.</em></p>

    {% include 'docs/examples/patterns/forms/_radio.html' %}

    <label class="p-radio">
      <input type="radio" class="p-radio__input" aria-labelledby="radio1WrapLabel">
      <span class="p-radio__label" id="radio1WrapLabel">.p-radio with a label long enough to wrap wrap wrap wrap wrap wrap wrap wrap</span>
    </label>

    <label class="p-radio">
      <input type="radio" class="p-radio__input" name="radioPattern" aria-labelledby="radioExample1help">
      <span class="p-radio__label" id="radioExample1help">.p-radio</span>
    </label>
    <p class="p-form-help-text is-tick-element">help-text</p>

    {% include 'docs/examples/patterns/forms/_radio-heading.html' %}

    {% include 'docs/examples/patterns/forms/_radio-inline.html' %}

    <p class="p-muted-heading">
      <label class="p-radio--inline">
        <input type="radio" class="p-radio__input" name="radioPattern" aria-labelledby="radioLabel1"/>
        <span class="p-radio__label" id="radioLabel1" name="radioLabel1">.p-radio--inline in .p-muted-heading</span>
      </label>
    </p>

    <p>
      <span class="p-muted-heading">
        <label class="p-radio--inline">
          <input type="radio" class="p-radio__input" name="radioPattern" aria-labelledby="radioLabel2"/>
          <span class="p-radio__label" id="radioLabel2" name="radioLabel2">.p-radio--inline in .p-muted-heading</span>
        </label>
      </span>
      alongside text
    </p>

    <div class="u-fixed-width">
      <input class="p-button--positive" type="submit" value="Submit" aria-label="Submit"/>
    </div>
  </div>
</div>



</form>
{% endblock %}
